<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="12">
        <el-card v-if="currentNode" class="box-card" style="position:fixed:right:0;">
          <div slot="header" class="clearfix">
            <span>{{ currentNode.orgName }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="edit(currentNode.id)">编辑</el-button>
          </div>
          <el-row>
            <el-col :span="20">
              <el-tag type="success">I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D:</el-tag><span>&nbsp;{{ currentNode.id }}</span><br>
              <el-tag type="success">机构简码:</el-tag><span>&nbsp;{{ currentNode.orgCode }}</span><br>
              <el-tag type="success">创建时间:</el-tag><span>&nbsp;{{ currentNode.createTime }}</span><br>
              <el-tag type="success">机构简介:</el-tag><span>&nbsp;{{ currentNode.orgDesc }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :title="customFormInitOption.title"
      :visible.sync="customFormInitOption.showModal"
      :close-on-click-modal="false"
    >
      <OrgForm
        ref="orgForm"
        :action="customFormInitOption.action"
      />
      <div slot="footer">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button v-if="customFormInitOption.action === 'add'" type="danger" @click="reset">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import OrgForm from '@/views/admin/org/form';
import { get, remove, trees } from '@/api/admin/org';
import { checkOrgRelUser } from '@/api/admin/org-user';

export default {
  components: {
    OrgForm
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: null,
      customFormInitOption: {
        title: '',
        action: '',
        showModal: false
      },
      currentNode: null
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDepartmentData();
    });
  },
  methods: {
    handleNodeClick(data) {
      get(data.id).then(response => {
        const result = response.data;
        if (result.code === 0) {
          this.currentNode = result.data;
        } else {
          this.currentNode = null;
          this.$notify.error({
            title: result.code,
            message: result.msg
          });
        }
      });
    },
    getDepartmentData() {
      trees(this.id).then(response => {
        const result = response.data;
        if (result.code === 0) {
          this.data = result.data;
        } else {
          this.$notify.error({
            title: result.code,
            message: result.msg
          });
        }
      });
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>
            <i class='el-icon-plus' on-click={ () => this.append(data) } /> &nbsp;
            <i class='el-icon-minus' on-click={ () => this.remove(node, data) } />
          </span>
        </span>);
    },
    append(data) {
      this.handleAdd(data);
    },
    handleAdd(params) {
      this.customFormInitOption.title = '新增职能部门';
      this.customFormInitOption.action = 'add';
      this.customFormInitOption.showModal = true;
      this.$nextTick(() => {
        this.reset();
        this.$refs.orgForm.setPid(params.id);
      });
    },
    edit(id) {
      this.customFormInitOption.title = '编辑职能部门';
      this.customFormInitOption.action = 'edit';
      this.customFormInitOption.showModal = true;
      this.$nextTick(() => {
        this.$refs.orgForm.getInfo(id);
      });
    },
    remove(node, data) {
      this.$confirm('将删除【' + node.label + '】机构信息？', '请确认', {
        type: 'warning'
      }).then(() => {
        checkOrgRelUser(data.id).then(response => {
          if (response.data.data) {
            remove(data.id).then(response => {
              const result = response.data;
              if (result.code === 0) {
                this.$notify({
                  title: '成功',
                  type: 'success'
                });
              } else {
                this.$notify({
                  title: result.code,
                  message: result.msg,
                  type: 'error'
                });
              }
              this.getDepartmentData();
            });
          } else {
            this.$notify({
              title: 405,
              message: '部门下存在用户，无法删除',
              type: 'error'
            });
          }
        });
      }).catch(() => {});
    },
    handleSubmit() {
      this.$refs.orgForm.handleSubmit();
    },
    reset() {
      this.$refs.orgForm.reset();
    }
  }
};
</script>
